<template>
  <div class="outer-box" :style="{ width: winWidth + 'rem' }" onselectstart="return false;">
    <div class="company-name">智慧工地数据监控平台</div>

    <div class="data-container">
      <div class="row-box top-box-height">
        <!-- 项目信息 -->
        <div class="row-wrap left-box">
          <div class="box-bg item-info">
            <div class="subtitle-bg">
              <span class="icon-ele"></span>
              <span>项目信息</span>
            </div>
            <div class="screen-item">
              <el-select class="inline-input" size="mini" v-model="bidSection" @change="getWorkAreaList">
                <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="content-padding">
              <HomeItemInfo ref="HomeItemInfoRef"></HomeItemInfo>
            </div>
          </div>
        </div>

        <!-- 实时监控 -->
        <div class="row-wrap middle-box">
          <HomeMonitoring ref="HomeMonitoringRef"></HomeMonitoring>
        </div>

        <!-- 环境监测 -->
        <div class="row-wrap right-box">
          <div class="screen-item">
            <el-select class="inline-input" size="mini" v-model="areaId" @change="bindScreenTap">
              <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-select class="inline-input" size="mini" v-model="thirdPartyId" @change="getDeviceInfo">
              <el-option v-for="item in deviceListInfo" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-select class="inline-input" size="mini" v-model="tender" @change="getTenderInfo(tender)">
              <el-option v-for="item in tenderList" :key="item.organizationUuid" :label="item.name" :value="item.organizationUuid" />
            </el-select>
            <el-select class="inline-input" size="mini" v-model="device" @change="changeDevice(device)">
              <el-option v-for="item in deviceList" :key="item.uuid" :label="item.name" :value="item.uuid" />
            </el-select>
          </div>

          <div class="box-bg environment">
            <div class="subtitle-bg">
              <span class="icon-ele"></span>
              <span>环境监测</span>
            </div>
            <div class="content-padding">
              <HomeEnvironment ref="HomeEnvironmentRef"></HomeEnvironment>
            </div>
          </div>
        </div>
      </div>

      <div class="row-box bottom-box-height">
        <!-- 在册人数 -->
        <div class="box-bg box-data-width">
          <div class="subtitle-bg">
            <span class="icon-ele icon-color"></span>
            <span class="text-color">在册人数</span>
          </div>
          <div class="content-padding">
            <HomeCheck ref="HomeCheckRef"></HomeCheck>
          </div>
        </div>

        <!-- 在场人数 -->
        <div class="box-bg box-data-width">
          <div class="subtitle-bg">
            <span class="icon-ele icon-color"></span>
            <span class="text-color">在场人数</span>
          </div>
          <div class="content-padding">
            <HomeOnScene ref="HomeOnSceneRef"></HomeOnScene>
          </div>
        </div>

        <!-- 设备数量 -->
        <div class="box-bg box-data-width">
          <div class="subtitle-bg">
            <span class="icon-ele icon-color"></span>
            <span class="text-color">设备数量</span>
          </div>
          <div class="content-padding">
            <HomeDeviceNum ref="HomeDeviceNumRef"></HomeDeviceNum>
          </div>
        </div>

        <!-- 进出记录 -->
        <div class="box-bg box-data-width">
          <div class="subtitle-bg">
            <span class="icon-ele icon-color"></span>
            <span class="text-color">进出记录</span>
          </div>
          <div class="content-padding padding-item">
            <HomeTurnoverRecord ref="HomeTurnoverRecordRef"></HomeTurnoverRecord>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HomeItemInfo from "./home/HomeItemInfo";
import HomeMonitoring from "./home/HomeMonitoring";
import HomeEnvironment from "./home/HomeEnvironment";
import HomeCheck from "./home/HomeCheck";
import HomeOnScene from "./home/HomeOnScene";
import HomeDeviceNum from "./home/HomeDeviceNum";
import HomeTurnoverRecord from "./home/HomeTurnoverRecord";
import { mapState, mapActions } from "vuex";
import HttpInterface from "../../util/httpInterface";

export default {
  name: "Index",
  components: {
    HomeItemInfo, HomeMonitoring, HomeEnvironment, HomeCheck,
    HomeOnScene, HomeDeviceNum, HomeTurnoverRecord
  },
  data() {
    return {
      winWidth: 96,
      bidSection: "",
      tenderList: [],
      workAreaInfo: [],
      areaId: "",
      tender: "",
      deviceList: [],
      device: "",
      numbers: [],
      date: [],
      deviceListInfo: [],
      thirdPartyId: "",
      envirData: null,
      flag: null
    };
  },

  computed: {
    ...mapState(["biaoduanList", "tenantId"])
  },

  mounted() {
    let _this = this;
    HttpInterface.getUserInfo(() => {
      this.getTendersInfo((data) => {
        _this.bidSection = data[0].id;
        _this.getWorkAreaList();
      });
    })
  },

  beforeDestroy() {
    this.flag && clearInterval(this.flag);
    this.flag = null;
  },

  methods: {
    ...mapActions(["getTendersInfo", "getEnvironmentInfo", "getEnvironmentDevice", "selectByBidSection"]),

    getDataInfo() {
      this.$refs.HomeMonitoringRef.getVideoList(this.bidSection);
      this.$refs.HomeItemInfoRef.getProjectInfo(this.bidSection);
      this.$refs.HomeDeviceNumRef.getDeviceNumInfo(this.bidSection);

      let refs = this.$refs.HomeTurnoverRecordRef;
      refs && refs.getInAndOutList(this.bidSection);

      this.flag = setInterval(() => {
        refs && refs.getInAndOutList(this.bidSection);
      }, 5000)
    },

    // 根据标段查 工区列表
    getWorkAreaList() {
      let _this = this;
      this.selectByBidSection({
        bidSection: this.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
          if (data.length == 0) {
            _this.areaId = "";
          } else {
            _this.areaId = data[0].id;
          }

          _this.getDataInfo();
          _this.getPeopleCounting(_this.bidSection);
          _this.bindScreenTap();
        }
      })
    },

    // 选择工区
    bindScreenTap() {
      let _this = this;
      this.getEnvironmentDevice({
        areaId: this.areaId,
        fn (data) {
          _this.deviceListInfo = data.rows;
          if (data.rows.length == 0) {
            _this.thirdPartyId = '';
          } else {
            _this.thirdPartyId = data.rows[0].id;
          }
          _this.getDeviceInfo();
        }
      });
    },

    // 选择设备
    getDeviceInfo() {
      let _this = this;
      this.getEnvironmentInfo({
        id: this.thirdPartyId,
        fn (data) {
          _this.tenderList = data;
          _this.tender = data[0].organizationUuid;
          _this.getTenderInfo(_this.tender);
        }
      });
    },

    // 获得工地设备
    getTenderInfo(id) {
      let param = {
        orgUuid: id,
        thirdPartyId: this.thirdPartyId
      };
      HttpInterface.requestGet(this, HttpInterface.URL_ENVIRONMENT_GETDEVICE, param, (res) => {
        var { other } = res.data;
        this.deviceList = other;
        this.device = other[0].uuid;
        this.changeDevice(other[0].uuid);
      }, null)
    },

    // 获得环境监测数据
    changeDevice(uuid) {
      let params = {
        deviceUuid: uuid,
        thirdPartyId: this.thirdPartyId
      };
      HttpInterface.requestGet(this, HttpInterface.URL_ENVIRONMENT_GETENVDATA, params, (res) => {
        var data = res.data;
        this.$refs.HomeEnvironmentRef.getData(data.other)
      }, null)
    },

    // 在册人数  在场人数
    getPeopleCounting(bidSection) {
      let _this = this;
      let params = { bidSection };
      HttpInterface.requestPost(this, HttpInterface.URL_GET_REGISTER_AND_ONLINE, params, (res) => {
        var data = res.data;

        // groupList 在册人数     day7Online 在场人数
        let { groupList, day7Online } = data.other;
        let numbers = [];
        let date = [];
        day7Online.forEach(item => {
          numbers.push(item.count);
          date.push(item.date);
        })
        _this.$refs.HomeOnSceneRef.getOnScene(numbers, date);
        _this.$refs.HomeCheckRef.getCheckData(groupList);
      }, null, true);
    }
  }
};
</script>

<style scoped lang="scss">
.outer-box {
  width: 100%;
  height: 100vh;
  background: url("../images/home-bg.jpg") no-repeat left top / 100% 100%;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;

  .company-name {
    height: 80px;
    background: url("../images/title-bg.png") no-repeat left top / 100% 100%;
    line-height: 65px;
    letter-spacing: 5px;
    text-align: center;
    font-size: 34px;
  }

  .data-container {
    padding: 8px 20px 20px 20px;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 80px);

    .row-box {
      width: 100%;
      display: flex;
    }

    /* 上部分区域 */
    .top-box-height {
      display: flex;
      justify-content: space-between;

      /* 左侧/右侧区域 */
      .left-box,
      .right-box {
        display: flex;
        flex-direction: column;
        background: url("../images/ele-bg1.png") no-repeat left top / 100% 100%;
        box-shadow: 0px 6px 16px rgba(22, 161, 162, 0.2);

        .box-bg{
          width: 360px;
          display: flex;
          flex-direction: column;
          height: 100%;

          .content-padding{
            padding: 0 18px;
          }
        }
      }

      .right-box {
        position: relative;

        .box-bg .content-padding{
          padding: 0 28px;
        }

        // 标段筛选
        .screen-item{
          position: absolute;
          top: 56px;
          left: 14px;
          z-index: 10;

          .inline-input{
            width: 80px;
          }
        }
      }

      /* 中间 实时监控 */
      .middle-box {
        width: 875px;
        background: url("../images/video-bg.png") no-repeat left top / 100% 100%;
        box-shadow: 0px 6px 16px rgba(22, 161, 162, 0.2);
      }

      .left-box{
        position: relative;

        // 标段筛选
        .screen-item{
          position: fixed;
          top: 108px;
          left: 114px;
          z-index: 10;

          .inline-input{
            width: 120px;
          }
        }
      }

      .row-wrap{
        //height: calc(100vh - 330px);
        height: 53vh;
        margin-right: 18px;

        &:last-child{
          margin-right: 0;
        }
      }
    }

    .bottom-box-height {
      /* 下面三个区域宽 */
      .box-data-width{
        width: 25%;

        .subtitle-bg{
          margin-top: 18px;
        }

        .padding-item{
          padding: 0 12px;
          margin-bottom: 10px;
        }
      }

      .box-bg{
        //height: calc(100vh - 520px);
        height: 30vh;
        display: flex;
        flex-direction: column;
        margin: 18px 9px 0px 10px;
        background: url("../images/ele-bg2.png") no-repeat left top / 100% 100%;
        box-shadow: 0px 6px 16px rgba(22, 161, 162, 0.2);

        &:first-child{
          margin-left: 0;
        }

        &:last-child{
          margin-right: 0;
        }
      }
    }
  }
}

/* 小标题背景 */
.subtitle-bg{
  font-size: 15px;
  color: #12D993;
  display: flex;
  align-items: center;
  margin-top: 22px;

  .icon-ele{
    display: inline-block;
    width: 5px;
    height: 20px;
    background: #12D993;
    margin-right: .9rem;
  }

  .icon-color{
    background: #FF6E57;
  }

  .text-color{
    color: #FF6E57;
  }
}

.content-padding{
  padding: 0 20px;
  box-sizing: border-box;
  overflow: auto;
  flex: 1;
}


.el-select >>> .el-input__inner{
  background-color: rgba(255, 255, 255, 0.2);
  color: #12D993;
  border: 1px solid #ffffff30;
}

/* 设置浏览器滚动条 */
.content-padding::-webkit-scrollbar{
  background-color: rgba(255, 255, 255, 0.02);
  width: .3rem;
}

.content-padding::-webkit-scrollbar-thumb{
  width: .2rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.el-select >>> .el-input__inner{
  padding: 0 24px 0 10px;
}

.el-select >>> .el-input__suffix {
  right: 2px;
}
</style>
